$(function(){
    // 需求一：获取文章分类列表信息，渲染至页面-->封装函数
    initArtCateList()
    function initArtCateList(){
        axios({
            method:'GET',
            url:'/my/article/cates',
        }).then(({data:res})=>{
            // 将获取到的文章信息渲染至页面
            // 1.声明空数组
            // 2.遍历res，将dom结构添加至数组
              //过滤脏数据-->追加判断条件
            // 3.将数组元素渲染
            // console.log(res);
            if(res.status!=0){
                return layui.layer.msg(res.message)
            }
            let arr =[]
            res.data.forEach(ele=>{
                // 过滤脏数据
                if(ele.Id<0) return
                arr.push(`
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id="${ele.Id}" class="editBtn layui-btn layui-btn-xs">修改</button>
                            <button data-id="${ele.Id}" class="delBtn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
            })
            $('tbody').empty().html(arr.join(''))
        })
    }

    // 声明全局变量存储开启的弹出层索引值，后面自动关闭需要使用，跨函数无法直接获取
    let indexAdd = null
    // 需求二：添加文章点击事件，弹出添加框表单
    $('#addBtn').on('click',function(){
        // 从layui官网定制自己的弹出效果，添加页面内容 --左边全局变量存储索引值
        indexAdd =  layui.layer.open({
            type:1,
             title: '添加文章分类',
             area: ['500px', '300px'],
             content: `
                <form id="addForm" class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
             `,
             
          }); 
    })

    // 需求三：添加框表单提交，触发请求上传数据
        //注意：该表单是点击添加按钮后动态创建的，需要使用事件委托
    $('body').on('submit','#addForm',function(e){
        e.preventDefault()
        axios({
            method:'POST',
            url:'/my/article/addcates',
            data:$(this).serialize()
        }).then(({data:res})=>{
            // console.log(res);
            if(res.status!=0) return layui.layer.msg(res.message)
            // 刷新页面
            initArtCateList()
            // 关闭页面 -->全局变量存储弹出层页面的索引值
            layui.layer.close(indexAdd)
        })
    })

    // 声明全局变量存储开启的弹出层索引值，后面自动关闭需要使用，跨函数无法直接获取
    let indexEdit = null
    // 需求四：事件委托给表格的每个修改按钮注册弹出层事件
    $('tbody').on('click','.editBtn',function(){
        // console.log('111');
        // 从layui官网定制自己的弹出效果，添加页面内容 --左边全局变量存储索引值
        indexEdit =  layui.layer.open({
            type:1,
             title: '修改文章分类',
             area: ['500px', '300px'],
             content: `
                <form lay-filter="editForm" id="editForm" class="layui-form" action="">
                <input type="hidden" name="Id">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn editBtn" lay-submit lay-filter="formDemo">确认修改</button>
                    </div>
                </div>
            </form>
             `,
          }); 
        // 点击弹出层的确认修改按钮，发送请求传递数据至后台
          //1.先发送get请求从后台获取数据
          //2.将后台响应的数据渲染至显示框
          //3.点击确认修改将修改后的输入返回给后台-->需要id-->隐藏域接受前面发送的id
        let id =$(this).attr('data-id')
          //1.先发送get请求从后台获取数据
        axios({
            method:'GET',
            url:'/my/article/cates/'+id
        }).then(({data:res})=>{
            // console.log(res)
        //   layui.form.val("editForm",res.data)
            // console.log($("#editForm"));
            console.log(res);
          //2.将后台相应的数据渲染至显示框
          layui.form.val("editForm",res.data)//layui自带form表单赋值方法，需要添加lay-filters自定义属性          
        })

          //3.点击确认修改将修改后的输入返回给后台-->需要id-->隐藏域接受前面发送的id
          $('#editForm .editBtn').on('click',function(){
            axios({
                method:'POST',
                url:'/my/article/updatecate',
                data:$('#editForm').serialize()
            }).then(({data:res})=>{
                console.log(res)
              // 将页面重新渲染，并关闭当前弹出页
              initArtCateList()
              layui.layer.close(indexEdit)
            })
          })
    })

    // 需求五：事件委托给表格的每个删除按钮注册弹出层事件
    $('tbody').on('click','.delBtn',function(){
        let id = $(this).attr("data-id")
        layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
            axios({
                method:'GET',
                // 这里的id需要用变量接收，否则 会显示失败
                url:'/my/article/deletecate/'+ id
            }).then(({data:res})=>{
                if(res.status!=0){
                    layui.layer.msg(res.message)
                }
                layui.layer.msg('恭喜删除成功')
                initArtCateList()
            })
            layer.close(index);
          });
    })

    // 需求六


})